import React from 'react';
import { Anchor, Row, Col } from 'antd';
import { getFirstTask } from 'utils/parser';
import { inquiryProcess } from 'services/process';
import { defaultRejectHandler } from 'utils/http';
import BpmnInteract from './BpmnInteract';
import Chart from './Chart';

const { Link } = Anchor;
const searchPattern = /^\?id=(.+)&processId=(.+)&processName=(.+)$/;

export default class MonitorService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bpmnXml: null,
      chosenTask: '',
    };
  }

  componentDidMount() {
    const { history: { location: { search } } } = this.props;
    const match = searchPattern.exec(search);
    const processId = match[2];
    inquiryProcess({
      params: { processId },
    }).then((data) => data.bpmn, defaultRejectHandler).then((text) => {
      const chosenTask = getFirstTask(text);
      this.setState({
        chosenTask,
        bpmnXml: text,
      });
    });
  }

  render() {
    const { history: { location: { search } } } = this.props;
    const match = searchPattern.exec(search);
    const id = match[1];
    const processName = decodeURI(match[3]);
    const { chosenTask, bpmnXml } = this.state;

    return (
      <Row gutter={40}>
        <Col span={20}>
          <div id="viewer">
            <BpmnInteract
              name={processName}
              id={id}
              bpmnXml={bpmnXml}
              setChosenId={(i) => this.setState({ chosenTask: i })}
            />
          </div>
          <div id="chart">
            {/* 一开始显示的是第一个task，从解析里获取到 */}
            {/* 在表上显示选中的task */}
            <Chart
              id={id}
              chosenTask={chosenTask}
              name={processName}
            />
          </div>
        </Col>
        <Col span={4}>
          <Anchor>
            <Link href="#viewer" title="流程图" />
            <Link href="#chart" title="服务监控">
              <Link href="#line" title="折线图" />
              <Link href="#gauge" title="仪表盘" />
            </Link>
          </Anchor>
        </Col>
      </Row>
    );
  }
}
